<template>
	<view class="page page-order">
		<!-- 搜索 -->
		<view class="search-box flex-row-between">
			<view class="search flex-row-start">
				<image src="../../static/search_b.png"></image>
				<input class="input_search" type="search" :value="initData.param.name" placeholder="开方医生名称搜索" confirm-type="搜索" @input="Oninput" @confirm="Onsearch" />
			</view>
			<view>
				<uni-data-checkbox multiple :value="value" :localdata="range" @change="change" selectedColor="#15bb26"></uni-data-checkbox>
			</view>
		</view>
		<!-- 筛选 -->
		<view class="filter-bar flex-row-between">
			<block v-for="(item, index) in filterBar" :key="index">
				<view class="item" :class="{'active' : filterCurrent == item.id}" @click="filterList(item.id)">{{item.title}}</view>
			</block>
		</view>
		
		<!-- 列表 -->
		<view class="prescript-list">
			<LoadMore ref="LoadMore" id="LoadMore" :diffHeight="152" :initData="initData" @dataRefresh='dataRefresh'>
				<block v-for="(item, index) in dataList" :key="index">
					<view class="item" @click="goNext('/pagesA/prescript/orderDetail?id=' + item.id)">
						<view class="part1 flex-row-between">
							<view class="font13">诊断结果：{{item.diagnose}}</view>
							<view class="font12" :class="item.status">{{item.status_text}}</view>
						</view>
						<view class="part2">
							<text class="font13">用药建议：</text>
							<text class="font12 font-969696">{{item.doctor_goods_name}}</text>
						</view>
						<view class="doctor font12 font-969696 u-flex u-flex-between">
							<view class="u-flex">
								<view class="photo bg-cover" :style="{backgroundImage: 'url(' + $base.cdn(item.doctor_info?item.doctor_info.img:item.doctor_img) + ')'}"></view>
								<text>{{item.doctor_info?item.doctor_info.name:item.doctor_name}}</text>
								<text>{{item.createtime}}</text>
							</view>
							<view class="btn-small" v-if="item.status == 'normal'">去审核</view>
							<view class="btn-small success" v-if="item.status == 'yes'">处方详情</view>
							<view class="btn-small warning" v-if="item.status == 'reject'">处方详情</view>
						</view>

					</view>
				</block>
			</LoadMore>
		</view>
	</view>
</template>

<script>
	import LoadMore from "@/components/loadMore.vue";
	export default {
		components: { LoadMore },
		data() {
			return {
				value: '',
				range: [{"value": 1,"text": "仅我审核处方"}],
				filterBar: [
					{ id: '', title: '全部'},
					{ id: 'normal', title: '待审核'},
					{ id: 'yes', title: '已通过'},
					{ id: 'reject', title: '已驳回'}
				],
				filterCurrent: '', // 高亮的id
				// 传参数据
				initData: {
					url: 'ysList',
					param: {
						status: '',
						name:'',
						is_me: 0
					}
				},
				dataList:[],
			}
		},
		onLoad(options) {
			if (options.mode) {
				this.filterCurrent = options.mode
				this.initData.param.status = options.mode
			}
			if(options.isme&&options.isme==1){
				this.value = [1]
				this.initData.param.is_me = 1
			}
		},
		methods: {
			// 搜索输入框
			Oninput(e){
				this.initData.param.name = e.detail.value
			},
			// 点击搜索
			Onsearch(){
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			change(e){
				this.initData.param.is_me = e.detail.value[0] ? e.detail.value[0] : 0
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			// 筛选列表
			filterList (id) {
				this.filterCurrent = id
				this.initData.param.status = id
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			//返回数据
			dataRefresh(e) {
				let $this = this
				// e.forEach(item => {
				// 	if (item.doctor_info) {
				// 		item.doctor_info.img = $this.$store.state.http_img + item.doctor_info.img
				// 	}
				// })
				this.dataList = e
			},
			goNext (url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
	
	.filter-bar{
		padding-bottom: 10rpx;
	}
	.filter-bar .active{
		color: #4ccb90;
		
		&:after {
			background-color: #3dc787;
		}
	}
	
	.search-box .search.flex-row-start{
		border-radius: 10rpx;
	}
	/deep/.uni-data-checklist .checklist-group .checklist-box .checkbox__inner{
		border-radius: 50%;
	}
	/deep/.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text{
		color: #333333!important;
	}
	
	.prescript-list .item{
		padding: 20rpx 4rpx;
		
		.part1,.part2{
			padding-left: 30rpx;
			padding-right: 30rpx;
		}
		
		.normal{
			color: #64d8f9;
		}
		.yes{
			color: #3dc787;
		}
		.reject{
			color: #dc830f;
		}
		
		.doctor{
			border-top: 2rpx solid #eeeeee;
			padding: 26rpx 30rpx 0;
		}
		
		.btn-small{
			width: 140rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			color: #fff;
			background-color: #45d1f8;
			border: none;
			
			&.success{
				background-color: #3dc787;
			}
			&.warning{
				color: #dc830f;
				background-color: #f3edbc;
			}
		}
	}
</style>
